{{setTitle "Photo Gallery Layout Example"}}
{{addLocalCSS "/css/layouts/gallery.css"}}

<div class="content pure-g-r">
    <div class="header pure-u-1">
        <div class="pure-menu pure-menu-open pure-menu-horizontal">
            <a class="pure-menu-heading" href="">Photo Gallery</a>

            <ul>
                <li class="pure-menu-selected"><a href="#">Home</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </div>
    </div>

    <div class="content pure-u-1">
        <div class="pure-g-r">
            <div class="pure-u-1-3 photo-box">
                <a href="http://www.flickr.com/photos/95572727@N00/4070581709/">
                    <img src="http://farm3.staticflickr.com/2447/4070581709_1204f25e3b.jpg"
                         alt="Photo of a Bamboo forest in Kyoto.">
                </a>

                <aside class="photo-box-caption">
                    The Bamboo Forest, Kyoto
                    <span>
                        by <a href="http://www.flickr.com/photos/95572727@N00/4070581709/">Stuck in Customs</a> / <a href="http://creativecommons.org/licenses/by-nc-sa/2.0/">cc</a>
                    </span>
                </aside>
            </div>

            <div class="pure-u-2-3 text-box">
                <div class="l-box">
                    <h1 class="text-box-head">Photos from around the world</h1>
                    <p class="text-box-subhead">A collection of beautiful Flickr photos.</p>
                </div>
            </div>

            <div class="pure-u-1-3 photo-box">
                <a href="http://www.flickr.com/photos/ecstaticist/4015614533/">
                    <img src="http://farm3.staticflickr.com/2785/4015614533_3e04ac2c7d.jpg"
                         alt="Photo of Dahlia taken using an HDR technique.">
                </a>

                <aside class="photo-box-caption">
                    HDR Dahlia
                    <span>
                        by <a href="http://www.flickr.com/photos/ecstaticist/4015614533/">ecstaticist</a> / <a href="http://creativecommons.org/licenses/by-nc-sa/2.0/">cc</a>
                    </span>
                </aside>
            </div>

            <div class="pure-u-1-3 photo-box">
                <a href="http://www.flickr.com/photos/blmiers2/6159637428/">
                    <img src="http://farm7.staticflickr.com/6151/6159637428_6bffb5bce1.jpg"
                         alt="Photo of a misty morning sunrise in Alaska.">
                </a>

                <aside class="photo-box-caption">
                    Misty Morning Sunrise, Alaska
                    <span>
                        by <a href="http://www.flickr.com/photos/blmiers2/6159637428/">blmiers2</a> / <a href="http://creativecommons.org/licenses/by-nc-sa/2.0/">cc</a>
                    </span>
                </aside>
            </div>

            <div class="pure-u-1-3 photo-box">
                <a href="http://www.flickr.com/photos/blmiers2/6167391543/">
                    <img src="http://farm7.staticflickr.com/6171/6167391543_395a7cabfd.jpg"
                         alt="Photo of a mountain in Alaska's Denali.">
                </a>

                <aside class="photo-box-caption">
                    Mountain, Alaska's Denali
                    <span>
                        by <a href="http://www.flickr.com/photos/blmiers2/6159637428/">blmiers2</a> / <a href="http://creativecommons.org/licenses/by-nc-sa/2.0/">cc</a>
                    </span>
                </aside>
            </div>

            <div class="pure-u-2-3 photo-box">
                <a href="http://www.flickr.com/photos/jjjohn/2120309884/">
                    <img src="http://farm3.staticflickr.com/2109/2120309884_de48fdb9fe.jpg"
                         alt="Photo of Earth's sky.">
                </a>

                <aside class="photo-box-caption">
                    Fire, Air, Earth and Water
                    <span>
                        by <a href="http://www.flickr.com/photos/jjjohn/2120309884/">jjjohn</a> / <a href="http://creativecommons.org/licenses/by-nc-sa/2.0/">cc</a>
                    </span>
                </aside>
            </div>

            <div class="pure-u-1-3 photo-box">
                <a href="http://www.flickr.com/photos/betta_design/2086852016/">
                    <img src="http://farm3.staticflickr.com/2388/2086852016_5a58dd1881.jpg"
                         alt="Photo of the Taj Mahal at sunset.">
                </a>

                <aside class="photo-box-caption">
                    Taj Mahal at sunset
                    <span>
                        by <a href="http://www.flickr.com/photos/betta_design/2086852016/">betta_design</a> / <a href="http://creativecommons.org/licenses/by-nc-sa/2.0/">cc</a>
                    </span>
                </aside>
            </div>

            <div class="pure-u-1 form-box">
                <div class="l-box">
                    <h2>Submit a Photo</h2>

                    <form class="pure-form">
                        <input type="text" placeholder="Photo URL" required>
                        <input type="text" placeholder="Email">
                        <button type="submit" class="pure-button">Submit</button>
                    </form>
                </div>
            </div>

            <div class="pure-u-1">
                <div class="l-box">
                    <h2>Creating a Photo Gallery Layout</h2>

                    <p>
                        This page shows how to make a photo gallery using <a href="{{pages.grids}}">Pure Grids</a>. Using Pure, we can create interesting layouts such as this photo gallery. This layout is fully responsive. We've added a bit of custom media queries on top of the responsive grid provided by Pure.
                    </p>

                    <p>
                        We've also taken advantage of <a href="{{pages.forms}}">Pure Forms</a> and <a href="{{pages.menus}}">Pure Menus</a>. This example uses a form with the {{code "pure-form"}} class name to create an inline form. We use <a href="{{pages.buttons}}">Pure Buttons</a> for the button styling.
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div class="footer pure-u-1">
        View the source of this layout to learn more. Made with love by the YUI Team.
    </div>
</div>

<script src="http://yui.yahooapis.com/{{yui_version}}/build/yui/yui{{min}}.js"></script>
{{> prevent-scroll}}
